 <template>
    <div class="centerHeader-wrapper">
        <div class="img-wrap">
            <img class="ad-img" src="@/assets/images/center_01.png">

            <div class="figure-wrap">
                <div class="box-l figure-box">
                    <div class="img-wrap">
                        <img class="figure-img" src="@/assets/images/center_01.png">
                    </div>
                    <img class="level-img" src="@/assets/images/huangguan.png">
                </div>

                <div class="box-r figure-txt">
                    <span>{{username}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

 <script type="text/ecmascript-6">
export default {
  name: "centerHeader",
  data() {
    return {};
  },
  components: {},
  computed: {
    username: {
      get() {
        let username = localStorage.getItem("user_name");
        if (username == null) {
          return "";
        }
        return username;
      }
    },
    user_head: {
      get() {
        let user_head = localStorage.getItem("user_head");
        if (user_head == null) {
          return "";
        }
        return user_head;
      }
    }
  }
};
</script>

 <style scoped lang="scss">
.img-wrap {
  width: 100%;
  height: 3.02rem;
  overflow: hidden;
  position: relative;
  border-radius: 0rem;

  .ad-img {
    @extend .cmm-translateXY;
    height: 100%;
  }
}

.figure-wrap {
  width: 100%;
  $letHeight: 1.5rem;
  height: $letHeight;
  @extend .cmm-translateY;
  left: 0.42rem;
  @extend .cmm-clearfix;

  .box-l {
    float: left;
  }
  .box-r {
    float: left;
  }

  .figure-box {
    height: $letHeight;
    width: 1.3rem;
    position: relative;
    .img-wrap {
      width: 1.02rem;
      height: 1.02rem;
      border-radius: 100%;
      border: 0.04rem solid $c-white-light;
      overflow: hidden;
      @extend .cmm-translateXY;

      .figure-img {
        @extend .cmm-translateXY;
        height: 100%;
      }
    }

    .level-img {
      position: absolute;
      height: 0.54rem;
      top: -0.1rem;
      right: -0.2rem;
      width: 0.54rem;
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
    }
  }

  .figure-txt {
    height: $letHeight;
    width: 1.02rem;
    position: relative;
    overflow: visible;
    span {
      @extend .cmm-translateY;
      font-size: 0.36rem;
      white-space: nowrap;
    }
  }
}
</style>
